<!-- 烟气比对 -->
<template>
  <div class="custome-table">
    <el-form>
      <div class="table-title">烟气参比方法比对测试报告</div>
      <!-- row1 -->
      <div class="table-row-item">
        <div class="table-row-item">
          <div class="item-label">维护管理单位</div>
          <div class="item-value">{{ form.key1 }}</div>
        </div>
        <div class="table-row-item">
          <div class="item-label">企业名称</div>
          <div class="item-value">{{ form.enterpriseName }}</div>
        </div>
      </div>
      <!-- row2 -->
      <div class="table-row-item">
        <div class="table-row-item">
          <div class="item-label">排放口名称</div>
          <div class="item-value">{{ form.outletName }}</div>
        </div>
        <div class="table-row-item">
          <div class="item-label">运维结果</div>
          <div class="item-value">
            <el-select v-model="form.key4" :disabled="detail" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.codeName"
                :value="item.code"
              />
            </el-select>
          </div>
        </div>
      </div>
      <!-- row3 -->
      <div class="table-row-item">
        <div class="table-row-item">
          <div class="item-label">填报时间</div>
          <div class="item-value">
            <el-date-picker
              v-model="form.key5"
              type="datetime"
              placeholder="选择填报时间"
            />
          </div>
        </div>
        <div class="table-row-item">
          <div class="item-label">填报人</div>
          <div class="item-value">{{ form.key6 }}</div>
        </div>
      </div>
      <!-- row4 -->
      <div class="table-row-item">
        <div class="table-row-item">
          <div class="item-label">签到时间</div>
          <div class="item-value">
            <el-date-picker
              v-model="form.key7"
              type="datetime"
              placeholder="选择签到时间"
            />
          </div>
        </div>
        <div table-row-item />
      </div>

      <div class="custom-table">
        <table>
          <tr>
            <th width="120">被测单位</th>
            <th colspan="3">
              <el-input v-model="form.key8" :disabled="detail" />
            </th>
            <th width="120">地址</th>
            <th colspan="3">
              <el-input v-model="form.key9" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th width="120">联系人</th>
            <th colspan="2">
              <el-input v-model="form.key10" :disabled="detail" />
            </th>
            <th width="120">电话</th>
            <th>
              <el-input v-model="form.key11" :disabled="detail" />
            </th>
            <th width="120">邮编</th>
            <th>
              <el-input v-model="form.key12" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th width="120">CEMS生产商</th>
            <th colspan="3">
              <el-input v-model="form.key13" :disabled="detail" />
            </th>
            <th width="120">CEMS原理</th>
            <th colspan="3">
              <el-input v-model="form.key14" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th width="120">CEMS型号</th>
            <th width="120" colspan="3"><el-input v-model="form.key15" :disabled="detail" /></th>
            <th width="120" rowspan="2">参比方法原理</th>
            <th width="120" rowspan="2" colspan="3"><el-input v-model="form.key16" :disabled="detail" /></th>
          </tr>
          <tr>
            <th width="120">监测位置</th>
            <th width="120" colspan="3"><el-input v-model="form.key17" :disabled="detail" /></th>
          </tr>
          <tr>
            <th width="120">监测仪器</th>
            <th colspan="3">
              <el-input v-model="form.key18" :disabled="detail" />
            </th>
            <th width="120">编号</th>
            <th colspan="3">
              <el-input v-model="form.key19" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th width="120">监测日期</th>
            <th colspan="3">
              <el-input v-model="form.key20" :disabled="detail" />
            </th>
            <th width="120">监测人员</th>
            <th colspan="3">
              <el-input v-model="form.key21" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th width="120">监测内容</th>
            <th colspan="6">
              <el-input v-model="form.key22" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th width="120">监测依据</th>
            <th colspan="6">
              <el-input v-model="form.key23" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th colspan="7">参比方法评估SO2 CEMS相对准确度结果</th>
          </tr>
          <tr>
            <th>样品编号</th>
            <th colspan="2">参比方法(RM)A(mg/m3)</th>
            <th colspan="2">CEMS法(RM)B(mg/m3)</th>
            <th colspan="2">数据对差=B-A</th>
          </tr>
          <tr v-for="(item, index) in form.tableList1" :key="'tableRow1_'+index">
            <th>{{ index + 1 }}</th>
            <th colspan="2">
              <el-input v-model="item['key'+(index*3+1)]" :disabled="detail" />
            </th>
            <th colspan="2">
              <el-input v-model="item['key'+(index*3+2)]" :disabled="detail" />
            </th>
            <th colspan="2">
              <el-input v-model="item['key'+(index*3+3)]" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th>平均值</th>
            <th colspan="6"><el-input v-model="form.key24" :disabled="detail" style="width: 240px" /></th>
          </tr>
          <tr>
            <th rowspan="5" colspan="1">标准气体</th>
            <th colspan="1" rowspan="2">名称</th>
            <th colspan="1" rowspan="2">保证值</th>
            <th colspan="2">参比方法测定结果</th>
            <th colspan="2">相对误差(%)</th>
          </tr>
          <tr>
            <th>采样前</th>
            <th>采样后</th>
            <th>采样前</th>
            <th>采样后</th>
          </tr>
          <tr>
            <th rowspan="3" width="120">二氧化硫mg/m3</th>
            <th><el-input v-model="form.key25" :disabled="detail" /></th>
            <th><el-input v-model="form.key26" :disabled="detail" /></th>
            <th><el-input v-model="form.key27" :disabled="detail" /></th>
            <th><el-input v-model="form.key28" :disabled="detail" /></th>
            <th><el-input v-model="form.key29" :disabled="detail" /></th>
          </tr>
          <tr>
            <th><el-input v-model="form.key30" :disabled="detail" /></th>
            <th><el-input v-model="form.key31" :disabled="detail" /></th>
            <th><el-input v-model="form.key32" :disabled="detail" /></th>
            <th><el-input v-model="form.key33" :disabled="detail" /></th>
            <th><el-input v-model="form.key34" :disabled="detail" /></th>
          </tr>
          <tr>
            <th><el-input v-model="form.key35" :disabled="detail" /></th>
            <th><el-input v-model="form.key36" :disabled="detail" /></th>
            <th><el-input v-model="form.key37" :disabled="detail" /></th>
            <th><el-input v-model="form.key38" :disabled="detail" /></th>
            <th><el-input v-model="form.key39" :disabled="detail" /></th>
          </tr>
          <tr>
            <th colspan="7">参比方法评估NOx CEMS相对准确度结果</th>
          </tr>
          <tr>
            <th>样品编号</th>
            <th colspan="2">参比方法(RM)A(mg/m3)</th>
            <th colspan="2">CEMS法(RM)B(mg/m3)</th>
            <th colspan="2">数据对差=B-A</th>
          </tr>
          <tr v-for="(item, index) in form.tableList2" :key="'tableRow2_'+index">
            <th>{{ index + 1 }}</th>
            <th colspan="2">
              <el-input v-model="item['key'+(index*3+1)]" :disabled="detail" />
            </th>
            <th colspan="2">
              <el-input v-model="item['key'+(index*3+2)]" :disabled="detail" />
            </th>
            <th colspan="2">
              <el-input v-model="item['key'+(index*3+3)]" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th>平均值</th>
            <th colspan="6"><el-input v-model="form.key40" :disabled="detail" style="width: 240px" /></th>
          </tr>
          <tr>
            <th rowspan="5" colspan="1">标准气体</th>
            <th colspan="1" rowspan="2">名称</th>
            <th colspan="1" rowspan="2">保证值</th>
            <th colspan="2">参比方法测定结果</th>
            <th colspan="2">相对误差(%)</th>
          </tr>
          <tr>
            <th>采样前</th>
            <th>采样后</th>
            <th>采样前</th>
            <th>采样后</th>
          </tr>
          <tr>
            <th rowspan="3" width="120">氮氧化物mg/m3</th>
            <th><el-input v-model="form.key41" :disabled="detail" /></th>
            <th><el-input v-model="form.key42" :disabled="detail" /></th>
            <th><el-input v-model="form.key43" :disabled="detail" /></th>
            <th><el-input v-model="form.key44" :disabled="detail" /></th>
            <th><el-input v-model="form.key45" :disabled="detail" /></th>
          </tr>
          <tr>
            <th><el-input v-model="form.key46" :disabled="detail" /></th>
            <th><el-input v-model="form.key47" :disabled="detail" /></th>
            <th><el-input v-model="form.key48" :disabled="detail" /></th>
            <th><el-input v-model="form.key49" :disabled="detail" /></th>
            <th><el-input v-model="form.key50" :disabled="detail" /></th>
          </tr>
          <tr>
            <th><el-input v-model="form.key51" :disabled="detail" /></th>
            <th><el-input v-model="form.key52" :disabled="detail" /></th>
            <th><el-input v-model="form.key53" :disabled="detail" /></th>
            <th><el-input v-model="form.key54" :disabled="detail" /></th>
            <th><el-input v-model="form.key55" :disabled="detail" /></th>
          </tr>
          <tr>
            <th colspan="7">参比方法评估含氧量CEMS相对准确度结果表</th>
          </tr>
          <tr>
            <th>样品编号</th>
            <th colspan="2">参比方法(RM)A(mg/m3)</th>
            <th colspan="2">CEMS法(RM)B(mg/m3)</th>
            <th colspan="2">数据对差=B-A</th>
          </tr>
          <tr v-for="(item, index) in form.tableList3" :key="'tableRow3_'+index">
            <th>{{ index + 1 }}</th>
            <th colspan="2">
              <el-input v-model="item['key'+(index*3+1)]" :disabled="detail" />
            </th>
            <th colspan="2">
              <el-input v-model="item['key'+(index*3+2)]" :disabled="detail" />
            </th>
            <th colspan="2">
              <el-input v-model="item['key'+(index*3+3)]" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th>平均值</th>
            <th colspan="6"><el-input v-model="form.key56" :disabled="detail" style="width: 240px" /></th>
          </tr>
          <tr>
            <th rowspan="5" colspan="1">标准气体</th>
            <th colspan="1" rowspan="2">名称</th>
            <th colspan="1" rowspan="2">保证值</th>
            <th colspan="2">参比方法测定结果</th>
            <th colspan="2">相对误差(%)</th>
          </tr>
          <tr>
            <th>采样前</th>
            <th>采样后</th>
            <th>采样前</th>
            <th>采样后</th>
          </tr>
          <tr>
            <th rowspan="3" width="120">含氧量%</th>
            <th><el-input v-model="form.key57" :disabled="detail" /></th>
            <th><el-input v-model="form.key58" :disabled="detail" /></th>
            <th><el-input v-model="form.key59" :disabled="detail" /></th>
            <th><el-input v-model="form.key60" :disabled="detail" /></th>
            <th><el-input v-model="form.key61" :disabled="detail" /></th>
          </tr>
          <tr>
            <th><el-input v-model="form.key62" :disabled="detail" /></th>
            <th><el-input v-model="form.key63" :disabled="detail" /></th>
            <th><el-input v-model="form.key64" :disabled="detail" /></th>
            <th><el-input v-model="form.key65" :disabled="detail" /></th>
            <th><el-input v-model="form.key66" :disabled="detail" /></th>
          </tr>
          <tr>
            <th><el-input v-model="form.key67" :disabled="detail" /></th>
            <th><el-input v-model="form.key68" :disabled="detail" /></th>
            <th><el-input v-model="form.key69" :disabled="detail" /></th>
            <th><el-input v-model="form.key70" :disabled="detail" /></th>
            <th><el-input v-model="form.key71" :disabled="detail" /></th>
          </tr>
          <tr>
            <th colspan="7">参比方法评估颗粒物CEMS相对准确度结果表</th>
          </tr>
          <tr>
            <th colspan="4">参比方法</th>
            <th colspan="3">CEMS法</th>
          </tr>
          <tr>
            <th>序号</th>
            <th>流速(m/s)</th>
            <th>温度(℃)</th>
            <th>烟尘(mg/m3)</th>
            <th>流速(m/s)</th>
            <th>温度(℃)</th>
            <th>烟尘(mg/m3)</th>
          </tr>
          <tr v-for="(item, index) in form.tableList4" :key="'tableRow4_'+index">
            <th>{{ index + 1 }}</th>
            <th>
              <el-input v-model="item['key'+(index*6+1)]" :disabled="detail" />
            </th>
            <th>
              <el-input v-model="item['key'+(index*6+2)]" :disabled="detail" />
            </th>
            <th>
              <el-input v-model="item['key'+(index*6+3)]" :disabled="detail" />
            </th>
            <th>
              <el-input v-model="item['key'+(index*6+4)]" :disabled="detail" />
            </th>
            <th>
              <el-input v-model="item['key'+(index*6+5)]" :disabled="detail" />
            </th>
            <th>
              <el-input v-model="item['key'+(index*6+6)]" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <th>平均值</th>
            <th colspan="6"><el-input v-model="form.key72" :disabled="detail" style="width: 240px" /></th>
          </tr>
        </table>
        <table style="margin-top: 20px;">
          <tr>
            <td width="150">
              上传文件：图片
            </td>
            <td colspan="6">
              <TableUpLoadFile ref="tableUploadFile" :files-list="filePath" :detail="detail" />
            </td>
          </tr>
          <tr>
            <td width="150">
              上传文件：视频
            </td>
            <td colspan="6">
              <TableUpLoadVideo ref="tableUploadVideo" :video-list="videoPath" :detail="detail" />
            </td>
          </tr>
        </table>
      </div>
    </el-form>

  </div>
</template>

<script>
import { getDict } from '@/utils/dict'
import { fileUrl, staticImgUrl } from '@/url'
import TableUpLoadFile from './../TableUpLoadFile'
import TableUpLoadVideo from './../TableUpLoadVideo'
export default {
  name: 'Yqbd',
  components: {
    TableUpLoadFile,
    TableUpLoadVideo
  },
  props: {
    obj: {
      type: Object,
      default: null
    },
    maintenaIndex: {
      type: Number,
      default: 0
    },
    detail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imagePreview: false,
      videoLoadingFlag: false,
      imgLoadingFlag: false,
      typeList: [],
      fileUrl, staticImgUrl,
      yesNoList: [
        { value: '是', label: '是' },
        { value: '是', label: '否' }
      ],
      // 显示的图片数据
      filePath: [],
      showVideoPath: [],
      videoPath: [],
      form: {
        key1: '', enterpriseName: '', outletName: '',
        key4: null, key5: '', key6: '',
        key7: '', key8: '', key9: '',
        key10: '', key11: '', key12: '', key13: '', key14: '', key15: '', key16: '', key17: '',
        key18: '', key19: '', key20: '', key21: '', key22: '', key23: '', key24: '', key25: '',
        key26: '', key27: '',
        tableList1: [
          { key1: '', key2: '', key3: '' },
          { key4: '', key5: '', key6: '' },
          { key7: '', key8: '', key9: '' },
          { key10: '', key11: '', key12: '' },
          { key13: '', key14: '', key15: '' },
          { key16: '', key17: '', key18: '' }
        ],
        tableList2: [
          { key1: '', key2: '', key3: '' },
          { key4: '', key5: '', key6: '' },
          { key7: '', key8: '', key9: '' },
          { key10: '', key11: '', key12: '' },
          { key13: '', key14: '', key15: '' },
          { key16: '', key17: '', key18: '' }
        ],
        tableList3: [
          { key1: '', key2: '', key3: '' },
          { key4: '', key5: '', key6: '' },
          { key7: '', key8: '', key9: '' },
          { key10: '', key11: '', key12: '' },
          { key13: '', key14: '', key15: '' },
          { key16: '', key17: '', key18: '' }
        ],
        tableList4: [
          { key1: '', key2: '', key3: '', key4: '', key5: '', key6: '' },
          { key7: '', key8: '', key9: '', key10: '', key11: '', key13: '' },
          { key13: '', key14: '', key15: '', key16: '', key17: '', key18: '' },
          { key19: '', key20: '', key21: '', key22: '', key23: '', key24: '' },
          { key25: '', key26: '', key27: '', key28: '', key29: '', key30: '' },
          { key31: '', key32: '', key33: '', key34: '', key35: '', key36: '' }
        ]
      }
    }
  },
  created() {
    this.init()
    this.typeList = getDict('e015')
    const infoStr = this.$store.getters.user.info
    if (infoStr) {
      const info = JSON.parse(infoStr)
      this.form.key6 = info.realName
    }
  },
  methods: {
    init() {
      if (this.obj.list) {
        const maintenaData = this.obj.list[this.maintenaIndex]
        if (maintenaData.filePath) {
          this.filePath = JSON.parse(maintenaData.filePath)
        }
        if (maintenaData.videoPath) {
          this.videoPath = JSON.parse(maintenaData.videoPath)
        }
        if (maintenaData.formContent) {
          this.form = JSON.parse(maintenaData.formContent)
        }
        this.form.enterpriseName = this.obj.enterpriseName
        this.form.outletName = this.obj.outletName
      }
    },
    getFormData() {
      return {
        formContent: JSON.stringify(this.form),
        filePath: this.$refs.tableUploadFile ? this.$refs.tableUploadFile.getPaths() : [],
        videoPath: this.$refs.tableUploadVideo ? this.$refs.tableUploadVideo.getPaths() : [],
        maintenaIndex: this.maintenaIndex
      }
    },
    clearData() {
      this.form = {
        key1: '', enterpriseName: '', outletName: '',
        key4: null, key5: '', key6: '',
        key7: '', key8: '', key9: '',
        key10: '', key11: '', key12: '', key13: '', key14: '', key15: '', key16: '', key17: '',
        key18: '', key19: '', key20: '', key21: '', key22: '', key23: '', key24: '', key25: '',
        key26: '', key27: '',
        tableList1: [
          { key1: '', key2: '', key3: '' },
          { key4: '', key5: '', key6: '' },
          { key7: '', key8: '', key9: '' },
          { key10: '', key11: '', key12: '' },
          { key13: '', key14: '', key15: '' },
          { key16: '', key17: '', key18: '' }
        ],
        tableList2: [
          { key1: '', key2: '', key3: '' },
          { key4: '', key5: '', key6: '' },
          { key7: '', key8: '', key9: '' },
          { key10: '', key11: '', key12: '' },
          { key13: '', key14: '', key15: '' },
          { key16: '', key17: '', key18: '' }
        ],
        tableList3: [
          { key1: '', key2: '', key3: '' },
          { key4: '', key5: '', key6: '' },
          { key7: '', key8: '', key9: '' },
          { key10: '', key11: '', key12: '' },
          { key13: '', key14: '', key15: '' },
          { key16: '', key17: '', key18: '' }
        ],
        tableList4: [
          { key1: '', key2: '', key3: '', key4: '', key5: '', key6: '' },
          { key7: '', key8: '', key9: '', key10: '', key11: '', key13: '' },
          { key13: '', key14: '', key15: '', key16: '', key17: '', key18: '' },
          { key19: '', key20: '', key21: '', key22: '', key23: '', key24: '' },
          { key25: '', key26: '', key27: '', key28: '', key29: '', key30: '' },
          { key31: '', key32: '', key33: '', key34: '', key35: '', key36: '' }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
